<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <include file="Include:_cssjs" />
        <script type="text/javascript">
            $(function () {
            });
        </script>
<style>
#mapbar input[type="button"]{background-color: #0D9BF2;height:30px;text-align:center;line-height:30px;color:#fff;font-size:14px;border-radius:3px;outline: none;border:0;cursor:pointer;}
#mapbar input[type="button"].red{background-color:#f00;color:#fff;}
#mapbar input[type="button"].green{background-color:#0f0;color:#fff;}
</style>
    </head>
    <body>
        <div class="wrap">
            <include file="Include:_header" />
            <div class="container clearfix">
                <include file="Include:_left" />
                <div class="right">
                    <div class="tit"><h1>线路编辑 -- {$linevo.plTitle} </h1></div>
                    <div class="div1">
    <!--百度地图容器-->
    <div style="width:1140px;height:900px;border:#ccc solid 1px;font-size:12px;float:left;" id="map"></div>
                    </div>
                </div>
            </div>
            <include file="Include:_footer" />
        </div>
        <div id="barwrap" style="display:none;">
            <input type="text" id="title" value="{$linevo['plTitle']}" /><br/>
            <input type="text" id="remark" value="{$linevo['plRemark']}" /><br/>
            <select id="color">
                <option value="red" <if condition="$linevo['style']['strokeColor'] eq 'red' ">selected</if> >红色</option>
                <option value="blue" <if condition="$linevo['style']['strokeColor'] eq 'blue' ">selected</if> >蓝色</option>
                <option value="green" <if condition="$linevo['style']['strokeColor'] eq 'green' ">selected</if> >绿色</option>
                <option value="pink" <if condition="$linevo['style']['strokeColor'] eq 'pink' ">selected</if> >粉色</option>
                <option value="yellow" <if condition="$linevo['style']['strokeColor'] eq 'yellow' ">selected</if> >橙色</option>
                <option value="black" <if condition="$linevo['style']['strokeColor'] eq 'black' ">selected</if> >黑色</option>
            </select>
        </div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F4VxOyGMo84zqM64v4hdXy1t"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript">
	var isDianDian = false;
	var pointlist_temp = $('#pointlist_temp');
	var linelist = $('#linelist');
	var overlays = [];
    var polyline;
    var lineid = {$linevo['plId']} ;

    function addMapOverlay(){
      var plColor = "{$linevo['style']['strokeColor']}";
      var plOpts = {strokeColor:plColor,strokeWeight:"3",strokeOpacity:"0.8"};
      var plPath = [
<volist name="linevo.ext" id="vo">
          new BMap.Point({$vo.lng},{$vo.lat}),
</volist>
      ];
      polyline = new BMap.Polyline(plPath,plOpts);
      polyline.enableEditing();
      map.addOverlay(polyline);
    }


	function savelineinfo(){
        console.log(polyline.getPath().length);
        if(polyline.getPath().length==0){
            alert('线路异常,请清空重新画');return;
        }
        var _1 = polyline.getPath();
		var _2 = [];
		for(var i=0;i<_1.length;i++){
		    _2.push( {'lng':_1[i].lng , 'lat':_1[i].lat} );
		}
        var _3 = JSON.stringify(_2);
        var _4 = $.base64.encode(_3);
        console.log(_4);

        var title = $('#title').val();
        var remark = $('#remark').val();
        var linecolor = $('#color').val();
        var _5 = "{:U('Map/line_edit_post')}"+'?id='+lineid+'&title='+title+'&remark='+remark+'&color='+linecolor+'&ext='+_4;
        console.log(_5);
        top.location.href = _5;
	}

    function clearAll() {
		for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0
    }


    function addMapControl_mapop(){
	    ZoomControl.prototype = new BMap.Control();
	    ZoomControl.prototype.initialize = function(map){
	        var div = document.createElement("div");
            div.id="mapbar";
//div.appendChild(document.createTextNode("放大2级"));
//   div.style.cursor = "pointer";div.style.border = "1px solid gray";div.style.backgroundColor = "white";
            var btn1 = document.createElement("input");
            btn1.type="button";btn1.value="保 存";
            btn1.onclick = function(e){
                if(!confirm('确认保存路径吗?')){return false;}else{
                    savelineinfo();
                }
            }
            div.appendChild(btn1);
            var btn2 = document.createElement("input");
            btn2.type="button";btn2.value="删 除";btn2.className = 'red';
            btn2.style.marginLeft='5px';
            btn2.onclick = function(e){
                if(!confirm('确认删除?')){return false;}else{
                    top.location.href = "{:U('Map/line_delete',array('lineid'=>$vo['plId']))}";
                }
            }
            div.appendChild(btn2);

            var barwrap = document.getElementById('barwrap');
            barwrap.style.display = '';
            div.appendChild(barwrap);

	        map.getContainer().appendChild(div);
	        return div;
        }
	    var myZoomCtrl = new ZoomControl();
	    map.addControl(myZoomCtrl);
    }

	function ZoomControl(){
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(40, 10);
	}



	//初始化
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
	  //addMapDrawingManager();
      addMapControl_mapop();
    }
    function createMap(){
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(117.178852,39.079737),18);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_METRIC);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:3});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
      map.addControl(overviewControl);
    }
    var map;
      initMap();


	Array.prototype.remove=function(obj){
		for(var i =0;i <this.length;i++){
			var temp = this[i];
		    if(!isNaN(obj)){ temp=i; }
            if(temp == obj){
                for(var j = i;j <this.length;j++){
                    this[j]=this[j+1];
                }
                this.length = this.length-1;
            }
        }
    }
  </script>
    </body>
</html>